.navbar{
    width:100vw;
    height:5rem;
    background: var(--navBackground);
    box-shadow: var(--navShadow);
    backdrop-filter: var(--navBackdrop);
    position: fixed;
    top: -10rem;
    z-index: 150;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:top 0.4s;
    color: black;
}


.navbar.change{
    top: 0;
    transition:top 0.4s 0.2s;
}

.nav-link{
    color:var(--navLinkColor);
    text-decoration: var(--navLinkDecoration);
    height: 100%;
    display: flex;
}

.navbar__link{
    margin:0 4rem;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity:0;
    transition:color 0.3s,opacity,2s;
    background-color: var(--navItemBackground);
}

.change .navbar__link{
    opacity:1;
}

.change .navbar__link:nth-child(1){
    transition:opacity 0.4s 0.5s,color 0.3s;
}
.change .navbar__link:nth-child(2){
    transition:opacity 0.4s 0.6s,color 0.3s;
}
.change .navbar__link:nth-child(3){
    transition:opacity 0.4s 0.7s,color 0.3s;
}

.navControl{
    width:2rem;
    height:4rem;
    background: var(--navControlBackground);
    box-shadow: var(--navControlShadow);
    backdrop-filter: var(--navControlBackdrop);
    border:var(--navControlBorder);
    position: fixed;
    top:1rem;
    right: 5rem;
    border-radius: var(--navControlBorderRadius);
    cursor: pointer;
    z-index: 100;
    transition:top 0.4s 0.2s;
}

.navControl.change{
    top:8rem;
    transition: top 0.4s;
}

.navControl::before{
    content: "";
    width:0.3rem;
    height: 8rem;
    background:var(--navControlBackground);
    box-shadow: var(--navControlShadow);
    backdrop-filter: var(--navControlBackdrop);
    border:var(--navControlBorder);
    position:absolute;
    top:-8rem;
    left:calc(50% - 0.15rem);
}

.nav--active{
    color:var(--navActiveColor);
    background-color: var(--navActiveBackground);
}
